/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var selectedTrip = -1;
var wayPoints = [];
var wayDates = [];
var startLocation = "";
var startDate = "";
var endLocation = "";
var endDate = "";
var tripID = 0;
$(document).ready(function(){
    $("#friendsBar").load("./GetFriendsServlet");
    $("#tripsPanel").load("./GetTripListServlet");
    $("#mainPanel").load("./GoToEditAccountServlet");
    $(document).on("click",".friend",function(){
        var id = $(this).attr("title");
        var nm = $(this).html();
        location.href="./GoToFriendsPageServlet?id=" + id+"&name="+nm;
    });
});
function eventClick(eventId){
    $(".tripDiv").each(function(){
        $(this).removeAttr("name");
    });  
    $("#mainPanel").html("<img src='images/BackButton.png' id='backButton' onclick='backToTrips()'"
        +" onmouseover='backHover()' onmouseout='backBlur()' onclick='backClick()' />"
        + "<input type='text' id='tripname'  name='tripname readonly='readonly' value='" + wayPoints[eventId-1] + "' />"
        +"<img src='images/GoToMapButtonNEW.png' id='tripButton' onmouseover='MapHover()' onmouseout='MapBlur()' onclick='goToMap(" + tripID + ")'/><div id='imagePanel'></div>"+
        "<div id='uploadPanel' > <img src='images/UploadButton.png' id='UploadButton' onclick='submitForm(" + tripID + "," + eventId + ")' onmouseout='uploadBlur()' onmouseover='uploadHover()' />" + 
        "<form method='POST' enctype='multipart/form-data' action='./Upload' id='uploadForm'><input type='file' name='upfile'/><form>" + "</div>");
    $("#imagePanel").load("./GetImagesServlet?tripId=" + tripID + "&eventId=" + eventId);
}
function tripClick(tripId){
    tripID = tripId;
    if($("#tripDiv_" + tripId).attr("name") != "current"){
        $(".eventDiv").each(function(){
            $(this).slideUp("fast");
        });
        $(".tripDiv").each(function(){
            $(this).removeAttr("name");
            $(this).css("background-image",""); 
            $(this).css("border-style","dashed");
            $(this).slideUp("fast");
        });    
        $("#tripDiv_" + tripId).attr("name","current");
        $("#tripDiv_" + tripId).slideDown("fast");
        $("#tripDiv_" + tripId).css("background-image", "url(../images/PostcardBar.png)");
        $("#tripDiv_" + tripId).css("border-style","none");
        $("#botfriendsPanel").load("./GetFriendsOnTripServlet?tripId=" + tripId);
        $("#eventDiv_" + tripId).slideDown("fast");
        selectedTrip = tripId;
        wayPoints = [];
        wayDates = [];
        var str = "";
        var wayPointHTML = "";
        var dates = "";
        $.get('./GetTripLocations?tripId=' + tripId, function(data){
            $.get('./GetTripDates?tripId=' + tripId, function(date){
                dates = date;
                str = data;
                startLocation = str.substring(0,str.indexOf("|"));
                startDate = dates.substring(0,dates.indexOf("|"));
                str = str.substring(str.indexOf("|")+1);
        
                //DATES
                dates = dates.substring(dates.indexOf("|")+1);
                while(dates.indexOf("|") != -1){
                    var d = dates.substring(0, dates.indexOf("|"));
                    wayDates.push(d.trim());
                    dates = dates.substring(dates.indexOf("|")+1);
                }
                endDate = dates.trim();
                //END DATES
       
                //WAY POINTS
                while(str.indexOf("|") != -1){
                    var s = str.substring(0,str.indexOf("|"));
                    wayPoints.push(s.trim());
                    str = str.substring(str.indexOf("|")+1);
                }
                endLocation = str.trim();
                /*alert("Start Location: " + startLocation);*/
                for(var i = 0; i < wayPoints.length; i++){
                    wayPointHTML += "<li>" + wayPoints[i] + "</li>";
                //  alert("Waypoints: " + wayPoints[i]);
                }
                /*alert("End Location: " + endLocation);*/
                //<img src='gotoamp.pg' onclick=goToMap('tripId')
                //var mpaButton = "<img src='GoToMapButton.png' onclick='goToMap('"
                $("#mainPanel").html("<img src='images/BackButton.png' id='backButton' onclick='backToTrips()'"
                    +" onmouseover='backHover()' onmouseout='backBlur()' onclick='backClick()' />" 
                    + "<input type='text' id='tripname'  name='tripname readonly='readonly' value='" + $("#tripDiv_" + tripId).attr("alt") + "' onclick='nameClick()' />"
                    + "<img src='images/updateButtonNEW.png' id='editButton' onmouseover='editHover()' onmouseout='editBlur()' onclick='editName()' />"
                    +"<img src='images/GoToMapButtonNEW.png' id='tripButton' onmouseover='MapHover()' onmouseout='MapBlur()' onclick='goToMap(" + tripId + ")'/><div id='imagePanel'></div>"+
                    "<div id='uploadPanel' > <img src='images/UploadButton.png' id='UploadButton' onclick='submitForm(" + tripID + "," + -1 + ")' onmouseout='uploadBlur()' onmouseover='uploadHover()' />" + 
                    "<form method='POST' enctype='multipart/form-data' action='./Upload' id='uploadForm'><input type='file' name='upfile'/><form>" + "</div>");

                //                $("#mainPanel").html("<div id='upperBar'>" 
                //                  +"<img src='images/BackButton.png' id='backButton' onclick='backToTrips()'" +" onmouseover='backHover()' onmouseout='backBlur()' onclick='backClick()' />"
                //                  +"<img src='images/GoToMapButton.png' id='goToMapButton' onmouseover='MapHover()' onmouseout='MapBlur()' onclick='goToMap(" + tripId + ")'/>"
                //                +"</div>"
                //                +"<div id='imageThumbnails'>"
                //                        
                //                +"</div>"
                //                +"<div id='bottomBar'>"
                //                        +"<img src='images/UploadButton.png' id='UploadButton' onclick='submitForm()' onmouseout='uploadBlur()' onmouseover='uploadHover()' />"
                //                        +"<form method='POST' enctype='multipart/form-data' action='./Upload' id='chooseFileButton'>"
                //                        +"<input type='file' name='upfile'/><form>"
                //                +"</div>");

                //                $("#imageThumbnails").load("./GetImagesServlet?tripId=" + tripID);
                $("#imagePanel").load("./GetImagesServlet?tripId=" + tripID);
                $(".thumbnail").on("hover", function(){
                    var src = $(this).attr("src");
                    $(this).attr('src','images/hover.png').css("opacity",".5"); 
                    $(this).attr('src',src).css("opacity",".5");
                },
                function(){
                    var src = $(this).attr("src");
                    $(this).attr('src','images/hover.png').css("opacity","0"); 
                    $(this).attr('src',src).css("opacity","1");
                });
            });
        });
    }
    else{
        backToTrips();
    }
    
}
function backToTrips(){
    $(".eventDiv").each(function(){
        $(this).slideUp("fast");
    });
    $(".tripDiv").each(function(){
        if($(this).attr("name") != "current"){
            $(this).slideDown("fast");
        }
        $(this).removeAttr("name");
        $(this).css("background-color",""); 
        $(this).css("border-style","dashed");
            
    });   
   $("#mainPanel").load("./GoToEditAccountServlet");
}
function backBlur(){
    $("#backButton").attr("src","images/BackButton.png");
}
function backHover(){
    $("#backButton").attr("src","images/BackButton_hover.png");
}

function editBlur(){
    $("#editButton").attr("src","images/updateButtonNEW.png");
}
function editHover(){
    $("#editButton").attr("src","images/updateButton_hoverNEW.png");
}

function editName(){
    location.href="./EditTripServlet?tripId=" + tripID + "&name=" + document.getElementById('tripname').value;
   ///mysql_query("UPDATE trip SET name= ? WHERE tripId= ?", tripId, document.getElementById('editButton').value);
   // request.getParameter("name"); //RETURNS A STRING so cast when necessary
   // c = Database.getConnection();
   // if(c != null)
   // PreparedStatement s = c.prepareStatement( QUERY )
   // try{
   // s.exceuteUpdate(); } catch(SQLException e){}
   //RequestDispatcher rd = request.getRequestDispatcher("./accountpage.jsp");
   //rd.forward(request,response);
}

function uploadHover(){
    $("#UploadButton").attr("src","images/UploadButton_hover.png");
}
function uploadBlur(){
    $("#UploadButton").attr("src","images/UploadButton.png");
}

function nameClick(){
    $("#tripname").removeAttr("readonly");
    $("#tripname").css("background-color","white");
}

function submitForm(tripId,eventId){
    if(eventId == -1){
        $("#uploadForm").attr("action","./Upload?tripId=" + tripId);
    }
    else{
        $("#uploadForm").attr("action","./Upload?tripId=" + tripId + "&eventId=" + eventId);
    }
    $("#uploadForm").submit();
}
function closeImage(){
    $("#bigDiv").html("");
    $("#bigDiv").css("display","none");
}
function enlarge(num){
    $("#bigDiv").css("display","block");
    var src = $("#image_" + num).attr("src");
    var html = "<select id='moveEventList'>";
    for(var k = 0; k < wayPoints.length; k++){
        html+= "<option value='" + k+1 + ">" + wayPoints[k] + "</option>"
    }
    html += "</select><input type='button' value='Move To Event' onclick='moveToEvent(" + num + ")' />";
    $("#bigDiv").html("<center><img id='bigImage' src='" + src + "' onclick='closeImage()' /><br/><input type='button' value='Delete Image' onclick='deleteImage(" + num + ")' />"+html+"</center>");

}
function deleteImage(num){
    location.href='./DeleteImageServlet?num=' + num;
}
function moveImage(num){
    location.href="./MoveImageToEvent?num=" + num + "&eventId=" + $("#moveEventList").val();
}
function goToMap(tripId){
    var locations = startLocation + "|";
    for(var i = 0; i < wayPoints.length; i++){
        locations += wayPoints[i] + "|";
    }
    locations += endLocation;
    var dates = "";//FILL THIS IN
    dates += startDate + "|";
    for(var i = 0; i < wayDates.length; i++){
        dates += wayDates[i] + "|";
    }
    dates += endDate;
    location.href='./GoToMapServlet?locations=' + locations + "&dates=" + dates + "&tripId=" + tripId; 
}
function addFriendsToTrip(){
    var friends = [];
    var x = 0;
    $("input:checkbox[name=friendCheckbox]:checked").each(function(){
        friends[x] = $(this).val(); 
        x += 1;
    });
    var frs = "";
    for(var k = 0; k < friends.length; k++){
        frs += "&friends=" + friends[k];
    }
    $("#botfriendsPanel").load("./AddFriendsToTripServlet?tripId=" + selectedTrip + frs);
    $("input:checkbox[name=friendCheckbox]:checked").each(function(){
        $(this).removeAttr("checked"); 
    });
}

function deleteFriend(){
    var friends = [];
    var x = 0;
    $("input:checkbox[name=friendCheckbox]:checked").each(function(){
        friends[x] = $(this).val(); 
        x += 1;
    });
    var frs = "";
    for(var k = 0; k < friends.length; k++){
        frs += "&friends=" + friends[k];
    }
    $("#friendsBar").load("./DeleteFriendServlet?" + frs);
    $("input:checkbox[name=friendCheckbox]:checked").each(function(){
        $(this).removeAttr("checked"); 
    });   
}

function addFriend(friend_id){
    $("#friendsBar").load("./FindFriendServlet?id=" + friend_id);   
}

$("#TripCreationButton").click(function(){
    location.href="./createTrip.jsp";
})
$("#SignOutButton").click(function(){ //REDIRECT TO A BEAN KILLING SERVLET OR SOMETHING
    location.href="./login.jsp";
});
$("#AccountButton").click(function(){ 
    location.href="./accountpage.jsp";
});
$("#AddFriendToTripButton").click(function(){
    $("#friendsBar").slideToggle("slow");
    $("#greyout").slideToggle("fast");
});


$("#TripCreationButton").hover(function(){
    $("#TripCreationButton").attr('src','images/createTripButton_hover.png');
},function(){
    $("#TripCreationButton").attr('src','images/createTripButton.png');
});
$("#AccountButton").hover(function(){
    $("#AccountButton").attr("src",'images/AccountButton_hoverBW.png');
},function(){
    $("#AccountButton").attr("src","images/AccountButton.png");
});
$("#SignOutButton").hover(function(){
    $("#SignOutButton").attr("src",'images/SignOutButton_hover.png');
},function(){
    $("#SignOutButton").attr("src","images/SignOutButton.png");
});
function MapHover(){
    $("#tripButton").attr("src","./images/GoToMapButton_hoverNEW.png");
}
function MapBlur(){
    $("#tripButton").attr("src","./images/GoToMapButtonNEW.png");
}



